import { defineComponent, useAttrs, PropType } from "vue";
import * as Icons from "@element-plus/icons-vue";
import { MenuItem } from "./type.ts";
import "./styles/index.scss";
export default defineComponent({
  props: {
    // 导航菜单的数据
    data: {
      type: Array as PropType<MenuItem[]>,
      required: true,
    },
    // 默认选中的菜单
    defaultActive: {
      type: String,
      default: "",
    },
    // 是否是路由模式
    router: {
      type: Boolean,
      default: false,
    },
    // 菜单标题的键名
    name: {
      type: String,
      default: "name",
    },
    // 菜单标识的键名
    index: {
      type: String,
      default: "index",
    },
    // 菜单图标的键名
    icon: {
      type: String,
      default: "icon",
    },
    // 菜单子菜单的键名
    children: {
      type: String,
      default: "children",
    },
  },
  setup(props: any) {
    const attrs = useAttrs();
    console.log(attrs);

    function renderMenu(menu: any) {
      return menu.map((item: any) => {
        // 每个菜单的图标
        if (props.icon) {
          item.i = (Icons as any)[item[props.icon]];
        }
        //处理插槽
        let solts = {
          title: () => {
            return (
              <>
                <item.i />
                {item[props.name]}
              </>
            );
          },
        };
        if (!item[props.children] || item[props.children].length === 0) {
          return (
            <el-menu-item index={item[props.index]}>
              <item.i />
              <span>{item[props.name]}</span>
            </el-menu-item>
          );
        } else {
          return (
            <el-sub-menu index={item[props.index]} v-slots={solts}>
              {renderMenu(item[props.children])}
            </el-sub-menu>
          );
        }
      });
    }

    return () => (
      <el-menu
        class="el-menu-vertical-demo"
        default-active={props.defaultActive}
        router={props.router}
        {...attrs}
      >
        {renderMenu(props.data)}
      </el-menu>
    );
  },
});
